<style rel="stylesheet/scss" lang="scss" scoped>
.mid {
  line-height: 140px;
}
button {
  margin: 3px;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class="">
      <div class="pds-tip">
        <el-form :inline="true" class="filter">
          <el-form-item label="">
            <el-select placeholder="客户形态" v-model="pageData.params.formDv" clearable>
              <el-option v-for="option in filter.options.formDv" :key="option.id" :label="option.labelZhCh" :value="option.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="客户类型" v-model="pageData.params.customerStatus" clearable>
              <el-option v-for="option in filter.options.customerStatus" :key="option.value" :label="option.label" :value="option.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="编辑状态" v-model="pageData.params.status" clearable>
              <el-option v-for="option in filter.options.status" :key="option.value" :label="option.status" :value="option.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-input style="width: 200px;" class="filter-item" placeholder="请输入客户代码或名称" v-model="pageData.params.searchKey">
          </el-input>
          <el-button class="filter-item" type="primary" icon="search" size="small" @click="search()" clearable>查询</el-button>
          <el-button type="warning" @click="resetForm()" size="small" class="filter-item" clearable>重置</el-button>
          <el-button class="filter-item" type="success" icon="search" @click="$router.push({path:'customer/add'})" size="small">新增</el-button>
        </el-form>
      </div>
      <el-table :data="pageData.list" border fit highlight-current-row style="width: 100%">
        <el-table-column width="50px" align="center" label="序号">
          <template slot-scope="scope">
            {{(pageData.params.page-1)*pageData.params.limit+(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column min-width="10%" align="center" label="客户代码" prop="code"></el-table-column>
        <el-table-column min-width="10%" align="center" label="客户名称" prop="name"></el-table-column>
        <el-table-column min-width="10%" align="center" label="客户形态" prop="formDv"></el-table-column>
        <el-table-column min-width="10%" align="center" label="客户类型">
          <template slot-scope="scope">
            <span v-if="scope.row.customerStatus===1">意向客户</span>
            <span v-if="scope.row.customerStatus===2">正式客户</span>
          </template>
        </el-table-column>
        <el-table-column min-width="10%" align="center" label="编辑状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">草稿</span>
            <span v-if="scope.row.status===1">审核中</span>
            <span v-if="scope.row.status===2">已发布</span>
            <span v-if="scope.row.status===3">已停用</span>
            <span v-if="scope.row.status===4">驳回</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" align="center" label="操作" prop="">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="$router.push({path:'/sale/customer/detail',query:{customerId:scope.row.id}})">查看</el-button>
            <el-button size="small" type="primary" @click="$router.push({path:'/sale/customer/edit',query:{customerId:scope.row.id}})" v-if="scope.row.status===0 ||scope.row.status===4 ||(scope.row.status===2 && scope.row.customerStatus===1)">编辑</el-button>
            <el-button size="small" type="primary" @click="$router.push({path:'/sale/customer/edit',query:{customerId:scope.row.id}})" v-if="scope.row.status===2 && scope.row.customerStatus===2">变更</el-button>
            <el-button size="small" type="danger" @click="deletePdsCustomer(scope.row.id)" v-if="scope.row.status!=3 && scope.row.status!=1">停用</el-button>
            <el-button size="small" type="warning" v-if="scope.row.customerStatus===1&&scope.row.status!=3" @click="changeCustomerStatus(scope.row.id)">转正式</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>

  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as baseApi from '@/api/common/index';
import * as prodApi from '@/api/product/index';
import * as api from '@/api/sale/customer/index';
export default {
  name: 'user',
  components: {
    // 'depart-selector': () =>
    //   import ('./components/departSelector')
  },
  data() {
    return {
      filter: {
        options: {
          formDv: [],
          customerStatus: [
            {
              value: '2',
              label: '正式客户'
            },
            {
              value: '1',
              label: '意向客户'
            }
          ],
          status: [
            {
              value: '0',
              status: '草稿'
            },
            {
              value: '1',
              status: '审核中'
            },
            {
              value: '2',
              status: '已发布'
            },
            {
              value: '3',
              status: '已停用'
            }
          ]
        }
      },
      pageData: {
        params: {
          page: 1,
          limit: 10,
          total: 100
        },
        list: []
      },
      productCategory: [],
      activeTab: 'first'
    };
  },
  created() {
    this.getDict();
    this.getPdsConfCategoryTree();
    this.getList();
    this.getformDv();
  },
  activated() {
    this.getList();
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    deletePdsCustomer(id) {
      console.log(id);
      this.$confirm('此操作将停用此条信息, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        const params = {
          customerId: id
        };
        api.deletePdsCustomer(params).then(response => {
          console.log(response);
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          }
        });
      });
    },
    changeCustomerStatus(id) {
      this.$confirm('此操作将转为正式客户, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        const params = {
          customerId: id
        };
        api.changeCustomerStatus(params).then(response => {
          console.log(response);
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          }
        });
      });
    },
    // 获取字典选项
    getDict() {
      const codes =
        'prod_file_sales_area,prod_file_pro_status,prod_file_biz_model,prod_file_market_pos';
      baseApi.getTypesValue(codes).then(res => {
        const arr = codes.split(',');
        // this.filter.options = res.data
      });
    },
    resetForm() {
      this.pageData.params = {
        page: 1,
        limit: 10,
        total: 100
      };
      this.getList();
    },
    search() {
      this.pageData.params.page = 1;
      this.getList();
    },
    changePage(pageData) {
      this.pageData.params.page = pageData.page;
      this.getList();
    },
    changeSize(pageSize) {
      this.pageData.params.limit = pageSize;
      this.pageData.params.page = 1;
      this.getList();
    },
    getList() {
      const params = Object.assign({}, this.pageData.params);
      delete params.total;
      api.getList(params).then(response => {
        if (response.code === 200) {
          this.pageData.list = response.data.rows;
          this.pageData.params.total = response.data.total;
        }
      });
    },
    // 获取客户形态下拉列表
    getformDv() {
      const params = 'pds_customer_form';
      api.formDv(params).then(res => {
        this.filter.options.formDv = res.data.rows;
        console.log(res.data);
      });
    },
    getPdsConfCategoryTree() {
      prodApi.getPdsConfCategoryTree().then(res => {
        console.log('getPdsConfCategoryTree', res);
        this.productCategory = res.data;
      });
    }
  }
};
</script>
